/**
 * Created by HYHC on 2017/3/2.
 */

import React, {Component} from 'react';
import {StyleSheet, Text, Image} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import TabNavigator from 'react-native-tab-navigator';
import HomePage from './page/HomePage';
import MakePage from './page/MakePage';
import UserPage from './page/UserPage';

export default class App extends Component {
  static defaultProps = {
    normalColor: '#a9a9a9',
    selectedColor: 'rgb(22,131,251)'
  }

  constructor(props){
    super(props);
    this.state = {
      selectedTab: 'home'
    }
  }

  render(){
    return(
      <TabNavigator
        tabBarStyle={styles.tabBarStyle}
      >
        <TabNavigator.Item
          title='首页'
          selected={this.state.selectedTab === 'home'}
          renderIcon={() => <Image style={styles.tabIcon} source={this.state.homeNormal}/>}
          renderSelectedIcon={() => <Image style={styles.tabIcon} source={this.state.homeSelected}/>}
          onPress={() => this.setState({selectedTab: 'home'})}
        >
          <HomePage/>
        </TabNavigator.Item>
        <TabNavigator.Item
          title='发布'
          selected={this.state.selectedTab === 'make'}
          renderIcon={() => <Image style={styles.tabIcon} source={this.state.makeNormal}/>}
          renderSelectedIcon={() => <Image style={styles.tabIcon} source={this.state.makeSelected}/>}
          onPress={() => this.setState({selectedTab: 'make'})}
        >
          <MakePage/>
        </TabNavigator.Item>
        <TabNavigator.Item
          title='更多'
          selected={this.state.selectedTab === 'user'}
          renderIcon={() => <Image style={styles.tabIcon} source={this.state.userNormal}/>}
          renderSelectedIcon={() => <Image style={styles.tabIcon} source={this.state.userSelected}/>}
          onPress={() => this.setState({selectedTab: 'user'})}
        >
          <UserPage/>
        </TabNavigator.Item>
      </TabNavigator>
    )
  }

  componentWillMount(){
    const {normalColor, selectedColor} = this.props;
    Icon.getImageSource('md-home', 50, normalColor).then((source) => this.setState({homeNormal: source}));
    Icon.getImageSource('md-home', 50, selectedColor).then((source) => this.setState({homeSelected: source}));
    Icon.getImageSource('md-add-circle', 50, normalColor).then((source) => this.setState({makeNormal: source}));
    Icon.getImageSource('md-add-circle', 50, selectedColor).then((source) => this.setState({makeSelected: source}));
    Icon.getImageSource('md-person', 50, normalColor).then((source) => this.setState({userNormal: source}));
    Icon.getImageSource('md-person', 50, selectedColor).then((source) => this.setState({userSelected: source}));
  }
}

const styles = StyleSheet.create({
  tabBarStyle:{
    height: 46
  },
  tabIcon:{
    width: 22,
    height: 22
  }
})